<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=request.getContextPath() %>\">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的收货地址</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/area.js"></script>
<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-family: "microsoft yahei";
				font-size: 14px;
				color: #333;
				background: #f7f7f7;
				line-height: 1.42857143;
			}
			body:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			ul{
				list-style: none;
			}
			a{
				color: #767676;
				text-decoration: none;
				background-color: transparent;
			}
			dt{
				font-weight: 700;
			}
			.my-main{
				width: 1140px;
				margin: 49px auto;
				border: 0px solid red;
			}
			.my-main:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			/*左边导航栏*/
			.row:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			.leftNav{
				width: 160px;
				height: 568px;
				float: left;
				background: #fff;
				padding-right: 15px;
				padding-left: 15px;
			}
			.my-menu dt{
				padding: 10px 15px;
				font-weight: 700;
			}
			.my-menu dd{
				border-bottom: 1px solid #d5d5d5;
			}
			.my-menu dd .nav{
				list-style: none;
			}
			.my-menu dd .nav li a{
				border-radius: 2px;
				display: block;
				padding: 10px 15px;
			}
			.my-menu .mm-root a{
				color: #da2a2a;
				font-size: 18px;
				font-weight: 500;
			}
			/*右边内容*/
			.my-page{
				margin-left: 20px;
				padding: 20px;
				width: 890px;
				border: 0px solid red;
				background: #fff;
			}
			.col-xs-10{
				float: left;
				position: relative;
			}
			.col-xs-7{
				width: 58.33333333%;
				float: left;
			}
			.col-xs-2{
				width:16.66666667%;
				float: left;
			}
			.my-page .page-pull{
				margin: 0 0 20px;
				padding-bottom: 9px;
				border-bottom: 1px solid #eee;
			}
			.page-pull h1{
				font-size: 22px;
				font-weight: 500;
			}
			.h1{
				font-family: inherit;
				font-weight: 500;
				line-height: 1.1;
				color: inherit;
			}
			.my-main.my-page.clearfix{
				height: 40px;
			}
			.my-main.page-pull{
				margin: 0 0 20px;
			}
			.clearfix{
				zoom: 1;
			}
			.page-pull{
				border-bottom: 1px solid #eee;
			}
			.pull-right{
				float: right!important;
			}
			.btn-success{
				color: #fff;
				background-color: #2f973f;
			}
			.btn.focus,.btn:focus,.btn:hover{
				text-decoration: none;
			}
			.btn{
				display: inline-block;
				padding: 6px 12px;
				font-size: 14px;
				font-weight: 400;
				line-height: 1.4185;
				margin-top: -32px;
				white-space: nowrap;
				vertical-align: middle;
				touch-action: manipulation;
				cursor: pointer;
				border: 2px solid transparent;
				border-radius: 2px;
				background-image: none;
			}	
			.btn img{
				width: 16px;
				height: 16px;
				background-color: white;
				border-radius: 100%;
				position: relative;
				top: 0px;
				left: -2px;
			}
			.glyphicon{
				position: relative;
				top: 1px;
				display: inline-block;
				font-style: normal;
				line-height: 1;
				font-weight: 400;
			}
			.list-group{
				margin-bottom: 20px;
			}
			.list-group-item1{
				padding: 10px 15px;
				margin-bottom: 25px;
				border: 1px solid #ddd;
			}
			.list-group-item1:first-child{
				border-top-left-radius: 2px;
				border-top-right-radius: 2px;
			}
			.list-inline{
				    margin-left: 89px;
				 	font-size: 16px;
			}
			.list-inline li{
				display: inline-block;
				padding-right: 5px;
				padding-left: 5px;
				margin-bottom: 10px;
			}
			.label{
				border-radius: .25em;
				color: #fff;
				font-weight: 700;
				padding: .2em .6em .3em;
			}
			.label-success{
				background-color: #2f973f;
			}
			.clearfix{
				height: 40px;
			}
			.abtn{
				border: 1px solid #ccc;
			}
			.abtn-default{
				margin-left: 5px;
			}
			.abtn-xs1{
				padding: 1px 5px;
				font-size: 12px;
				line-height: 1.5;
				border-radius: 1px;
				background: #2f973f;
    			color: white;
			}
			.abtn-xs2{
				padding: 1px 5px;
				font-size: 12px;
				line-height: 1.5;
				border-radius: 1px;
			}
			.abtn-xs3{
				padding: 1px 5px;
				font-size: 12px;
				line-height: 1.5;
				border-radius: 1px;
			}
			/*新增地址弹出层*/
			.adddzpager{
				width: 109%;
				height: 104%;
				position: fixed;
				top: -20px;
				z-index: 99999;
				background-color: rgba(0,0,0,0.3);
				margin-left:-121px;
			}
			.adddz{
				width: 50%;
				height: 500px;
				margin:80px auto;
				background-color: #fff;
			}
			.adddz .guanbi{
				margin-bottom: 10px;
			}
			.adddz .guanbi:after{
				content: ".";
				display: block;
				visibility: hidden;
				clear: both;
			}
			.adddz .guanbi .gbtitle{
				float: left;
				padding: 10px 15px;
			}
			.adddz .guanbi .gbtitle h3{
				font-weight: 550;
			}
			.adddz .guanbi .gbtitle small{
				font-size: 12px;
			}
			.adddz .guanbi .gbimg{
				float: right;
				padding: 10px 15px;
			}
			.adddz .guanbi .gbimg img{
				width: 24px;
				height: 24px;
			}
			.text-danger{
				color: red;
			}
			.form-group{
				margin-bottom: 15px;
			}
			.form-group:after{
				content: ".";
				display: block;
				visibility: hidden;
				clear: both;
			}
			.juzhong{
				width: 80%;
				margin: 0 auto;
			}
			.control-label{
				padding-top: 7px;
				text-align: right;
				padding-right: 15px;
			}
			.form-control{
				width: 100%;
				height: 20px;
				padding: 6px 12px;
				border: 1px solid #ccc;
				border-radius: 2px;
			}
			.dzliandong{
				width: 150%;
			}
			.dzliandong select{
				padding: 7px 1px;
			}
			.checkbox{
				padding: 7px;
			}
			.col-xs-5{
				margin-left: 18%;
			}
			.dzbtnbc{
				padding: 5px 28px;
				font-size: 18px;
				color: #fff;
				background-color: #2f973f;
				border-color: #2f973f;
				border: 1px solid transparent;
				margin-left: 100px;
			
			}
			.my-header{
				margin-bottom: 75px
			}
			.my-header:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}			
			.my-footer:after{
				content: ".";
				display: block;
				visibility: hidden;
				height:0px;
				clear: both;
			}
			.name{
				font-size:20px;
				margin-left: 13px;
			}
		</style>
		<script>
			$(function(){			
				//编辑地址按钮操作
				function bianji(){
						$(".gbimg").click(function(){
						$(".adddzpager").css("display","none");
						})
					$(".abtn-xs2").click(function(){
						$(".adddzpager").css("display","block");
					})
				}
				//新增地址按钮操作
				function tianjia(){
					$(".gbimg").click(function(){
						$(".page-pull").css("display","block");
					})
					$(".btn-xzdz").click(function(){
						$(".page-pull").css("display","block");
					})
				}
				
				/*
				*城市联动操作
				*/
				
				//加载省
				all_citys.forEach(function(v,i){
					$("#provice").append($("<option>").text(v.name).attr("index",i))
				})
				
				//联动操作
				pliandong()
				
				//省的change事件
				$("#provice").change(function(){
					pliandong();
				})
				
				//市的change事件
				$("#city").change(function(){
					var proindex=$("#provice>option:selected").attr("index");
					var disindex=$("#city>option:selected").attr("index");
					loaddistrict(proindex,disindex);
				})
				bianji();
				shanchudizhi()
				shezhimoren();
				dizhi();	
				xiugaidizhi();
				xianzhi();
				tianjia();
			})
			//地址操作
			function dizhi(){
				var mr="设为默认";
				var mrs="默认地址";
				<c:forEach var="k" items="${addresslist}" varStatus="vs"> 
				var di="${fn:length(addresslist)}";
					var	i=${vs.count}-1;
				var addisdefault="${k.addisdefault}";		//通过默认地址判断
					if(addisdefault==0){						
						$(".list-group-item1:eq("+i+")").addClass("list-group-item1");
						console.log("设为默认");
						$(".list-group-item1").not(".list-group").addClass("list-group");
						$(".abtn-xs1").text(mrs)				
					}else{
						console.log("不默认");
						$(".list-group-item").not(".list-group").addClass("list-group");
						$(".abtn-xs1").text(mr)					
					}if(di>0){								//当地址不为零时显示地址
						$(".my-page>.btn").hide();
						$(".my-page>.clearfix").css({"display":"block"});
					}
					</c:forEach>
					$(".btn-xzdz").click(function(){		//点击新增地址按钮新增地址
						$(".adddzpager").css("display","block");
					})
					$(".gbimg").click(function(){			//点击右上图片关闭
						$(".adddzpager").hide();
						$(".my-page>.list-group").css({"display":"block"});
					});		
			}	
			
			//设置默认地址按钮
			function shezhimoren() {
				$(".abtn-xs1").click(function(){
					var addrssid=$(this).attr("value");
					$.ajax({
						type:"post",
						url:"address",
						data:"v=shezhi&addrssid="+addrssid,
						success:function(msg){
							if(msg.res){
								dizhi();
								window.location.href="address?";
							}else{
								alert("设置失败");
							}
						}
					})
				})
			}
			
			//编辑地址
			function xiugaidizhi() {
				$(".abtn-xs2").click(function(){
					var addrssid=$(this).attr("value");
					$(".dzbtnbc").val(addrssid);
					$.ajax({
						type:"post",
						url:"address",
						data:"v=xiugai&addrssid="+addrssid,
						success:function(msg){
							$(".adddzpager").find("[name='addname']").val(msg.addname);				
							var province=msg.province;
							var city=msg.city;
							var county=msg.county;
							//加载省
							$(".adddzpager").find("[name='provice']").val(province);							
							var proindex=$("#provice>option:selected").attr("index");							
							loadcity(proindex);
							//加载市
							$(".adddzpager").find("[name='city']").val(city);
							var disindex=$("#city>option:selected").attr("index");
							loaddistrict(proindex,disindex);
							
							//加载当前县或区
					 		$(".adddzpager").find("[name='district']").val(county);							
							$(".adddzpager").find("[name='detailedaddress']").val(msg.detailedaddress);
							$(".adddzpager").find("[name='addphone']").val(msg.addphone);
			 			dizhi();
							var addisdefault=msg.addisdefault;
						if(addisdefault==0){						
							$(".adddzpager").find("[name='addisdefault']").prop("checked",true);
							
							console.log($(".addisdefault").is(":checked"))
						}else{		
							$(".adddzpager").find("[name='addisdefault']").prop("checked", false);  
							console.log($(".addisdefault").is(":checked"))
						}
							$(".adddzpager").css("display","block");
								
						}
					})
					//1、获取当前地址的主键id
					//2、利用ajax，将主键传到Servlet  ：实体类   fastJson   实体类对象专程json数据
				})
			}
			
			//删除地址
			function shanchudizhi() {
				$(".abtn-xs3").click(function(){
					var addrssid=$(this).attr("value");
					$.ajax({
						type:"post",
						url:"address",
						data:"v=shanchu&addrssid="+addrssid,
						success:function(msg){
							if(msg.res){
								dizhi();
								window.location.href="address?";
							}else{
								alert("删除失败")
							}
						}
					})
				})
			}
			//加载市
			function loadcity(pindex){
				$("#city>option").remove();
				all_citys[pindex].children.forEach(function(v,i){
					$("#city").append($("<option>").text(v.name).attr("index",i))
				})
			}
			//加载县/区
			function loaddistrict(pindex,dindex){
				$("#district>option").remove();
				all_citys[pindex].children[dindex].children.forEach(function(v,i){
					$("#district").append($("<option>").text(v.name).attr("index",i))
				})
			}
			//省联动操作
			function pliandong(){
				//加载当前市
				var proindex=$("#provice>option:selected").attr("index");
				loadcity(proindex);
				
				//加载当前县或区
				var disindex=$("#city>option:selected").attr("index");
				loaddistrict(proindex,disindex);
			}

			
			//新增限制
			function xianzhi(){
				$(".dzbtnbc").click(function(){
				var ss=$(".adddzpager").find("[name='addname']").val();	
				 $(".adddzpager").find("[name='provice']").val();	
				 $(".adddzpager").find("[name='city']").val();	
				 $(".adddzpager").find("[name='district']").val();	
				var mm=$(".adddzpager").find("[name='detailedaddress']").val();	
				var p=$(".adddzpager").find("[name='addphone']").val();						
					if(mm==null||mm==undefined||mm==""){
						alert("请输入姓名")
						return false;
					}
					if(mm==null||mm==undefined||mm==""){
						alert("请输入详细地址")
						return false;
					}
					if(isPhoneNo(p)==false){
						alert("请输入手机号")
						return false;
					}
				})
			}
			
			//手机号码验证	
			function isPhoneNo(phone) {
				var pattern =/^1[3-9]+\d{9}$/;
				return pattern.test(phone);
			}
			
		</script>
</head>
<body>
		<div class="my-header">
			<jsp:include page="include/header.jsp"></jsp:include>
		</div>
		<div class="my-main">
			<div class="row">
				<div class="leftNav">
					<dl class="my-menu">
						<dt class="mm-root">
							<a href="/member.html">会员中心</a>
						</dt>
						<dd></dd>
						<dt>交易</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="dingdan">我的订单</a>
								</li>
								<li>
									<a href="gwc">我的购物车</a>
								</li>
							</ul>
						</dd>
						<dt>购物</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="address">我的收货地址</a>
								</li>
							</ul>
						</dd>
						<dt>账户</dt>
						<dd>
							<ul class="nav">
								<li>
									<a href="huiyuan">个人信息</a>
								</li>
							</ul>
						</dd>
					</dl>
				</div>
				<!-- 地址 -->
				<div class="col-xs-10 my-page">
					<div class="page-pull clearfix">
						<h1 class="pull-left">
							我的收货地址
						<small>My Address</small>
						</h1>
							<button class="btn btn-success pull-right btn-xzdz" >
							<img src="imgs/liuimgs/yuanjia20.png" />
								新增收货地址
							</button>
					</div>
					<div class="list-group">
					<c:forEach var="k" items="${addresslist}" > 
						<div class="list-group-item1">
							<span class="name" >${k.addname}</span>		
							<div>
								<ul class="list-inline">
									<li>${k.province} ${k.city} ${k.county} ${k.detailedaddress}</li>							
									<li>${k.addphone}</li>
									<c:if test="${k.addisdefault==0}">
									<li class="morendizhi" value="${k.addrssid}" style="float:right;color:#2f973f;font-size:18px;margin-left:-83px;">默认地址</li>
									</c:if>
								</ul>
							</div>				
							<div class="clearfix">
								<div class="btn-group pull-right">
								<c:if test="${k.addisdefault==1}">
									<span class="abtn abtn-default abtn-xs1" value="${k.addrssid}">
										设置默认
									</span>
							    </c:if>
									<span class="abtn abtn-default abtn-xs2" value="${k.addrssid}">
										编辑
									</span>
									<span class="abtn abtn-default abtn-xs3" value="${k.addrssid}">
										删除
									</span>
								</div>
							</div>
						</div>
					</c:forEach>	
				</div>
			</div>
		</div>
	<!-- 新增地址弹出层 -->
		<div class="adddzpager" style="display:none;">
			<div class="adddz">
				<div class="guanbi">
					<div class="gbtitle">
						<h3>我的收货地址
							<small>My Address</small>
						</h3>
					</div>
					<div class="gbimg">
						<img src="imgs/liuimgs/dzgb.png" />
					</div>
				</div>
				<div class="juzhong">
					<form action="address?v=huoqudizhi" method="post">
						<div class="form-group">
							<label class="col-xs-2 control-label">收货人姓名
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text"  class="form-control" placeholder="收货人姓名" name="addname"/ >
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">收货地区
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<div class="dzliandong">
									<select id="provice" name="provice"></select>
									<select id="city" name="city"></select>
									<select id="district" name="district"></select>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">详细地址
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" class="form-control" placeholder="请填写详细的地址门牌号码,无需重复填写地区" name="detailedaddress" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">手机
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text"  class="form-control" placeholder="收货人手机号码" name="addphone"/>
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-xs-5 ">
								<div class="checkbox">
									<label>
										<input type="checkbox" name="addisdefault" class="addisdefault"/>
											设置为默认收货地址
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-5 ">
								<div class="checkbox">
									<button type="submit" class="dzbtnbc" name="dzbtnbc">保存</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="my-footer">
			<jsp:include page="include/footer.jsp"></jsp:include>		
		<div>
</body>
</html>